<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Hello MUI</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!--标准mui.css-->
    <link rel="stylesheet" href="../static/css/mui.min.css">
    <link rel="stylesheet" type="text/css" href="../static/css/mui.picker.min.css" />
    <!--App自定义的css-->
    <link rel="stylesheet" type="text/css" href="../static/css/app.css"/>
    <link rel="stylesheet" type="text/css" href="../static/css/native.css"/>
</head>

<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title"> 我的账号 </h1>
</header>
<div class="mui-content" id="profile">
    <div id="tabbar-with-map" class="mui-control-content mui-active">
        <ul class="mui-table-view" style="margin-top:20px;">
            <li class="mui-table-view-cell">
               <a  class="mui-navigate-right">
                 <div class="avatar_box">
                 </div>
                 <div class="user">
                    <p> Abduahad </p>
                    <span> 18902123716 </span>
                 </div>   
               </a>
            </li>
            <li class="mui-table-view-cell">
                <a href="edit_name.html" class="mui-navigate-right">
                   <span class="key"> 姓名 </span>
                   <span class="value"> 阿不来提 </span>
                </a>
            </li>
            <li class="mui-table-view-cell">
                <a href="#picture" class="mui-navigate-right" >
                   <span class="key"> 性别 </span>
                   <span class="value"> 男 </span>
                </a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right btn" onclick="dtPicker()" data-options='{}' >
                   <span class="key"> 年龄 </span>
                   <span class="value " id = "result"> 18 </span>
                </a>
            </li>
            <li class="mui-table-view-cell">
                <a href="email.html" class="mui-navigate-right">
                   <span class="key"> 邮箱 </span>
                   <span class="value"> itoldi@126.com </span>
                </a>
            </li>
        </ul>
    </div>
</div>
<div id="picture" class="mui-popover mui-popover-action mui-popover-bottom">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    <a onclick='sex(1)'>男</a>
                </li>
                <li class="mui-table-view-cell">
                    <a onclick='sex(2)'>女</a>
                </li>
            </ul>
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    <a href="#picture"><b>取消</b></a>
                </li>
            </ul>
</div>
</body>
<script src="../static/js/jquery-1.8.3.min.js"></script>
<script src="../static/js/mui.min.js"></script>
<!--<script src="../static/js/mui.picker.js"></script>
<script src="../static/js/mui.dtpicker.js"></script>-->
<script src="../static/js/mui.picker.min.js"></script>
<script>
  // 日期选择器
  var picker = new  mui.DtPicker({ 
            "type": "date",
         }); 
  function dtPicker(){
         picker.show(function (selectItems) { 
            console.log(selectItems.y); //{text: "2016",value: 2016} 
            console.log(selectItems.m); //{text: "05",value: "05"} 
         })
  } 
  function sex(sex){
    console.log(sex)
    mui("#picture").popover('toggle');
  } 
</script>
</html>